<template>
   <li class="form-item clearfix">
       <!-- text 单行输入-->
       <span class="ill-label" v-text="question_info.content" v-if="!hideLabel"></span>
        <span v-if="type(question_info.question_type) == 'text'" class="ill-value right">
            <!-- 数字 -->
            <input type="number" v-model="text_answer" pattern="[0-9]*" v-if="isNumber"
            :placeholder="question_info.hints || '请填写'" />
            <!-- 文本 -->
            <input type="text" v-model="text_answer" v-else-if="!isNumber"
            :placeholder="question_info.hints || '请填写'" />
            {{question_info.unit}}
        </span>
        <!-- number -->
        <!-- <span v-else-if="question_info.type=='number'" class="ill-value right">
            <input type="number" v-model.number="question_info.value" 
            :placeholder="question_info.placeholder || '请填写'"
            :require="question_info.validate.require" />
            {{question_info.unit}}
        </span> -->
        <!-- textarea -->
        <span v-else-if="type(question_info.question_type)=='textarea'" class="ill-evaluate-value">
            <textarea class="bdr-top" v-model="text_answer" :placeholder="question_info.hints || '请填写'"></textarea>
            {{question_info.unit}}
        </span>
        <!-- radio -->
        <span :class="{'ill-value':true,'right':!hideLabel}" v-else-if="type(question_info.question_type) == 'radio'">
            <label  v-for="(item,index) in options" :key="index" :for="question_info.id  + '-' + index + '-' + question_info.content">
                <input type="radio" :name="question_info.id" :id="question_info.id  + '-' + index + '-' + question_info.content" class="hide" v-model="text_answer" checked :value="JSON.stringify({option_ids:item.id,option_content:item.content})" :ref="question_info.id + index"/>
                <i :class="((isStringifyObject(text_answer) && JSON.parse(text_answer).option_content == item.content) 
                || (/*如果text_answer没有值或为null，则设置为默认值*/!text_answer && isSelected(index))) 
                ? 'selected-circle' : 'circle'"></i>
                <i v-text="item.content"></i>
            </label>
        </span>


        <span v-else-if="type(question_info.question_type)=='date'" :class="{'ill-value':true,'right':!hideLabel}">
            <a v-text="text_answer" @click="openDatePicker" class="datePicker"></a>
            <i class="iconfont icon-xiayiye"></i>
            <mt-datetime-picker
                ref="picker"
                type="date"
                :endDate="new Date()"
                 @confirm="confirmDate"
                v-model="date">
            </mt-datetime-picker>
        </span>

         <!-- image upload -->
        <div v-else-if="question_info.type=='upload'" class="ill-evaluate-value">
            <div class="upload-tip bdr-top" v-text="question_info.tip"></div>
            <div class="upload-box clearfix">
                <upload-image :value="images" :is-spin="true" css-icon-add="iconfont icon-jiahao" css-icon-remove="iconfont icon-quxiao"></upload-image>
            </div>
        </div>
        <div class="hr"></div>
   </li>
   
  
</template>
<script>
    // import ImageUpload from '../../../lib/components/UploadImage';
    //type用来解析question_type为对应表单输入类型
    // import type from '../../js/input_type.js'
    // import { DatetimePicker } from 'mint-ui';
    // require('mint-ui/lib/style.css')
    // import date from '../../../lib/winged/date.js'
    // console.log('type',type)
    export default{
        name:'formItem',
        // components:{
        //     [[DatetimePicker.name]]:DatetimePicker
        // },
        props:{
            data:{
                type:Object,
                default:{},
            },
            hideLabel:{
                type:Boolean,
                default:false
            },
            formKey:{
                type:String,
                defalut:null
            },
            values:{
                type:Array,
                default:function(){
                    return []
                }
            },
            value:{
                type:Object,
                default:function(){
                    return {question_id:this.data.question_info.id,question_content:this.data.question_info.content}
                }
            }
        },
        data(){
            return {        
                question_info:this.data.question_info,
                options:this.data.options,
                Value:this.value,
                isNumber:false,
                text_answer:'',
                date:new Date()
            }   
        },
        created(){
            if(type(this.question_info.question_type)=='date'){
                this.text_answer = date.format(this.date,'y-m-d')
            }
            if(type(this.question_info.question_type) == 'text'){
                let rules = this.question_info.checking_rules.split('#drone#')
                if(rules.length){
                    this.isNumber = rules.some(item => {
                        return item == 'tell' || 'number'

                    })
                }
                
            }
            console.log('data',this.data)
            // if(this.options){
            //     this.question_info.value = this.options[this.question_info.value]
            // }  
            // //递归调用，第二次进入本组件时，将key传入到question_info中
            // this.question_info.key = this.question_info.key || this.formKey
            if(this.values.length){
                this.Value = this.getValue(this.question_info.id) || this.Value
                console.log(this.question_info.content,this.Value)
                if(this.Value.text_answer){
                    this.text_answer = this.Value.text_answer
                }else if(this.Value.option_content){
                     this.text_answer = {'option_content':'' + this.Value.option_content,'option_ids':'' + this.Value.option_ids}
                }
                if(typeof(this.text_answer) == 'object'){
                    this.text_answer = JSON.stringify(this.text_answer)
                }
            }
            //默认就触发input事件一次，将表单项加到答案中
            this.$emit("input",this.Value)
        },
        computed:{
           
        },
        watch:{
            text_answer:function(val){
                this.setValue(val)
                let realatedFieldId = this.getRealatedFieldId()
                this.$emit("input",this.Value)
                this.$emit("toggleRealatedField",this.question_info.id, realatedFieldId)
            },
        },
        methods:{
            // type:type,
            openDatePicker:function(){
                this.$refs.picker.open();
            },
            confirmDate:function(val){
                this.text_answer = date.format(val,'y-m-d')
               //this.text_answer = 
            },
            getValue:function(id){
				return this.values.find(item => {
                    return item.question_id == id
                    })
			},
            isStringifyObject:function(data){
                return /^\{.*\}$/.test(data)
            },
            getRealatedFieldId:function(){
               let text_answer = this.isStringifyObject(this.text_answer)?JSON.parse(this.text_answer):this.text_answer,
                   tmp = this.options && this.options.filter(item => {
                                                    return text_answer.option_content == item.content
                                                })[0],
                   next_question_id = this.options ?
                                        (tmp ? tmp.next_question_id : undefined):
                                        this.question_info.next_question_id
               return next_question_id
               //return next_question_id && 
               //this.question_info.display && (question_info.display == true || question_info.display == 'true')
           },
            isSelected:function(index){
                if(JSON.parse(this.options[index].selected) == 1){
                    //如果默认选中，则设置text_answer值
                    this.setDefaultValue(index)
                    return true
                }
                return false
            },
            // 设置选项默认值
            setDefaultValue:function(index){//设置text_answer的值，这里手动设置值，是因为设置input radio的checked不生效，导致通过v-model绑定的text_answer无法自动设置为默认值
                this.$nextTick(_ => {
                    let radio = this.$refs[this.question_info.id + index][0]
                    ,val = radio.value
                    this.text_answer = val
                })
            },
            setValue:function(val){
                val = this.isStringifyObject(val)?JSON.parse(val):val
                if(typeof(val) == 'object'){
                    for(let i in val){
                        this.Value[i] = val[i]
                    }
                     console.log('1',this.Value)
                    return 
                }
                this.Value['text_answer'] = val
                console.log('2',this.value)
            },
        }
    }
</script>
<style>
.hide{
    display:none;
}



.form-item{
    position:relative;
    border:none!important;
}

.form-item .hr{
    position:absolute;
    left:-100%;
    z-index:10;
    width:300%;
    border-bottom:1px solid #eee;
}

.bdr-top{
    border-top:1px solid #eee;
}

.form-item li{
    padding:0;
    border-bottom:none;
}

.ill-value{
    display:flex;
}

label{
    padding:0 5px;
    flex:1 1 auto;
    text-align:left;
}
@media screen and (max-width:340px){
    label{
        padding:0;
    }
}

.ill-evaluate {
    margin-top: 10px;
}

.ill-evaluate i {
    font-size: 1.3rem;
}

.ill-evaluate-value input {
    width: 45px;
    text-align: right;
    margin-top: -3px;
}

.selected-circle,
.circle {
    position: relative;
    top: 2px;
    right: 2px;
}

/*有无其他疾病*/

.ill-box {
    margin-top: 10px;
}

.ill-label {
    position: relative;
    width: 100%;
}

.left{
    float:left;
}

.right {
    float: right;
}

.ill-value>span {
    margin-left: 15px;
}

.ill span {
    position: relative;
    display: inline-block;
    width: 29%;
    text-align: center;
    white-space: nowrap;
    font-size: 1.3rem;
}

.ill span:first-child {
    text-align: left;
    width: 22%;
}

.ill span:last-child {
    text-align: right;
    width: 15%;
}
/*家族疾病*/

.family-ill {
    margin-top: 10px;
}

.family-ill input {
    width: 100%;
}

.family-ill-value span {
    margin-left: 15px;
}

/*备注信息*/
.remark {
    margin-top: 10px;
}

textarea {
    font-size: 1.4rem;
    width: 100%;
    min-height: 44px;
    padding: 8px 0;
    margin-bottom: 8px;
}

/*图片上传box*/
.upload-tip {
    line-height: 25px;
}

.upload-file {
    margin-top: 10px;
}

.upload-box {
    position: relative;
    width: 100%;
    padding-bottom: 10px;
}

</style>
